<template>
    <div id="vabOnlyOffice"></div>
</template>

<script>
/* eslint-disable */
export default {
    name: 'VabOnlyOffice',
    props: {
        option: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            doctype: '',
            docEditor: null,
        };
    },
    watch: {
        option: {
            handler: function (n) {
                this.setEditor(n);
                this.doctype = this.getFileType(n.fileType);
            },
            deep: true,
        },
    },
    mounted() {
        const script = document.createElement('script');
        script.src = 'http://113.54.254.111:9000/web-apps/apps/api/documents/api.js';
        script.onload = () => {
            if (this.option.url) {
                this.setEditor(this.option);
            }
        };
        script.onerror = () => {
            console.error('Failed to load OnlyOffice DocsAPI script.');
        };
        document.head.appendChild(script);
    },
    beforeUnmount() {
        if (this.docEditor !== null) {
            this.docEditor.destroyEditor();
            this.docEditor = null;
        }
    },
    methods: {
        setEditor(option) {
            if (this.docEditor !== null) {
                this.docEditor.destroyEditor();
                this.docEditor = null;
            }
            this.doctype = this.getFileType(option.fileType);
            const config = {
                document: {
                    fileType: option.fileType,
                    key: option.key || '',
                    title: option.title,
                    permissions: {
                        edit: option.isEdit,
                        print: option.isPrint,
                        download: true,
                    },
                    url: option.url,  //文件url
                },
                documentType: this.doctype,
                editorConfig: {
                    callbackUrl: option.editUrl,
                    // callbackUrl: "http://113.54.245.41:9092/api/onlyoffice/callback",
                    lang: option.lang,
                    customization: {
                        autosave: false,
                        chat: false,
                        comments: false,
                        help: false,
                        plugins: false,
                    },
                    user: {  //拓展协同编辑有影响的信息
                        id: option.user.id,
                        name: option.user.name,
                    },
                    mode: 'edit',
                },
                width: '100%',
                height: '100%',
                token: option.token || '', //jwt令牌
            };
            this.docEditor = new DocsAPI.DocEditor('vabOnlyOffice', config);
        },
        getFileType(fileType) {
            const fileTypesDoc = ['doc', 'docx', 'txt'];
            const fileTypesCsv = ['csv', 'xls', 'xlsx'];
            const fileTypesPPt = ['ppt', 'pptx'];
            if (fileTypesDoc.includes(fileType)) return 'text';
            if (fileTypesCsv.includes(fileType)) return 'spreadsheet';
            if (fileTypesPPt.includes(fileType)) return 'presentation';
            return '';
        },
    },
};
</script>
